<template>
    <div style="width: 560px;height: 80px;display: flex;align-items: center;" @click="clickRoot">
        <img style="width: 51px;height: 51px;margin-left: 20px"
             :src="item.image"
             alt="">
        <div style="height:100%;display: flex;flex-direction: column;justify-content: space-between;padding-top: 14px;padding-bottom: 14px;box-sizing:border-box;">
            <div class="main_text_group" style="display: flex;align-items: flex-end">
                <p style="font-size:18px;color:rgba(51,51,51,1);">
                    {{item.name}}</p>
                <el-popover placement="bottom-start"
                            :width="$pop.licenseWidth"
                            trigger="hover"
                            :disabled="$pop.getLicensesString(item.license).all.length===0">
                    <p v-for="(lt,li) in $pop.getLicensesString(item.license).all" :key="li">
                        {{lt}}</p>
                    <p slot="reference" style="font-size:14px;color:rgba(51,51,51,1);">
                        {{$pop.getLicensesString(item.license).first}}</p>
                </el-popover>
                <p style="font-size:14px;color:rgba(51,51,51,1);">
                    {{item.salary?item.salary.a:''}}
                    <span style="font-size:10px;color:rgba(51,51,51,1);">{{item.salary?item.salary.b:''}}</span>
                </p>
            </div>
            <div class="sub_text_group" style="display: flex;align-items: center;justify-content: flex-start">
                <p>{{item.city}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{item.age}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{item.workTime}}</p>
                <p style="margin-left: 15px;margin-right: 15px">|</p>
                <p>{{item.workState}}</p>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'MsgTalentItem',
    props: {
      item: {
        type: Object,
        default() {
          return {
            image: '',
            name: '高女士',
            license: '执业类型',
            salary: {
              a: '10-20W',
              b: '/2年'
            },
            city: '工作城市',
            age: '年龄',
            workTime: '工作年限',
            workState: '求职状态'
          }
        }
      }
    },
    methods: {
      clickRoot(e) {
        this.$emit('click', e)
      }
    }
  }
</script>

<style scoped>
    p {
        font-weight: 400;
    }

    .sub_text_group {
        margin-left: 20px;
    }

    .sub_text_group > p {
        font-size: 14px;
        color: rgba(153, 153, 153, 1);
    }

    .main_text_group > p {
        padding-left: 20px;
        padding-right: 10px;
    }

    .main_text_group {

    }

</style>